<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/login.css" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages:[
						{
						  url: 'IPSetting.html',
						  id: 'ipSetting',
						}
					  ]
			})
		</script>
		
		
		<div class="mui-content">
			<div class="mui-content-padded">
				<img src="img/MainPictuer.net.png"  class="user-photo"/>
				<h3 class="text-fallow-img">CiChat</h3>
			</div>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="账号">
				</div>
				<div class="mui-input-row">
					<input id='password' type="password" class="mui-input-password mui-input" placeholder="密码">
				</div>
			</form>
			<form class="mui-input-group">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						记住账号
						<div id="autoLogin" class="mui-switch mui-switch-blue">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" data-loading-text="登录中..." class="mui-btn mui-btn-block mui-btn-primary ">登入</button>
				<div class="link-area">
					<a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='ip-setting'>IP设置</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">
				
			</div>
		</div>
		<script>
			mui.plusReady(function() {
				var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
				var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
				var top = plus.navigator.getStatusbarHeight();//状态栏高度
				document.getElementsByClassName("mui-content")[0].style.height = (height2) + "px";
				console.log(height1);//1920
				console.log(height2);//640
				console.log(top);//22
			});
			mui.plusReady(function() {
				var height1 = plus.android.invoke(plus.android.currentWebview(), "getHeight");//高度物理分辨率
				var height2 = plus.screen.resolutionHeight;//高度逻辑分辨率
				var top = plus.navigator.getStatusbarHeight();//状态栏高度
				document.getElementsByClassName("mui-content")[0].style.height = (height2-top) + "px";
				console.log(height1);//1920
				console.log(height2);//640
				console.log(top);//22
			});
			mui.plusReady(function() {
		        plus.navigator.setStatusBarBackground("#003366");
		    });
		</script>
		<!--页面跳转基础-->
		<script type="text/javascript" src="js/JQ.js" ></script>
		<script type="text/javascript" src="js/socket.io.js"></script>
		<script>
			//mui.toast("JQ");
//			mui('.link-area').on('tap','#reg',function(){
//				mui.toast("123");
//			});
			mui.plusReady(function () {
				$('#reg').bind('tap',function(){
					// mui.toast("注册一个账号");
					mui.openWindow({
								url: 'reg.html',
								id: 'reg',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
							});
				});
				
				$('#ip-setting').bind('tap',function(){
					
					mui.openWindow({
								url: 'IPSetting.html',
								id: 'ipSetting',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
							});
					let setpage=plus.webview.getWebviewById('ipSetting');
					if(setpage){
						mui.fire(setpage,'showWebview');
					}
				});
				function serURL(){
					let serverIP=localStorage.getItem('server-ip-config');
					let url=null;
					if(serverIP){
						serverIP=JSON.parse(serverIP);
						url='http://'+serverIP.add+':'+serverIP.port;
					}
					return url;
				}
				
				/* 连接测试 */
				// let socket = io.connect('http://localhost');
				
				/* 连接测试 */
				
				let usernnameInput=document.querySelector('#account');
				let passwordInput=document.querySelector('#password');
				let rememberInput=document.querySelector('#autoLogin');
				let loginButton=document.querySelector('#login');
				
				let accountConfig=JSON.parse(localStorage.getItem('accountConfig'));
				if(accountConfig){
					if(accountConfig.remember){
						usernnameInput.value=accountConfig.username;
						passwordInput.value=accountConfig.password;
						mui("#autoLogin").switch().toggle();
					}
				}else{
					accountConfig={remember:false};
				}
				document.getElementById("autoLogin").addEventListener("toggle",function(event){
				if(event.detail.isActive){
					accountConfig.remember=true;
					mui.toast('记住账号')
				}else{
					accountConfig.remember=false;
					mui.toast('不记录账号')
				}
				})
				
				// console.log(JSON.parse(null));
				
				$('#login').bind('tap',function(){
					let but=this;
					mui(but).button('loading');
					
					let url=serURL();
					if(!url){
						mui.toast('请先设置IP');
						return;
					}
					// mui.toast(usernnameInput.value);
					mui.ajax(url+'/login',{
								data:{
									username:usernnameInput.value,
									password:passwordInput.value
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								headers:{'Content-Type':'application/json'},	              
								success:function(data){
									//服务器返回响应，根据响应结果，分析是否登录成功；
									if(data.result){
										// mui.toast(data.messagetext);
										let user_info={
											username:usernnameInput.value,
											password:passwordInput.value
										};
										
										plus.storage.setItem('user_info',JSON.stringify(user_info));
										// let user=JSON.parse(plus.storage.getItem('user_info'));
										// 
										// console.log(user.username);
										// console.log(user_info.username);
										mui.openWindow({
													url: 'index.html',
													id: 'index',
													preload: true,
													show: {
														aniShow: 'zoom-fade-out'
													},
													styles: {
														popGesture: 'hide'
													},
													waiting: {
														autoShow: false
													}
												});
										
										//成功登陆后记住账号
										if(accountConfig.remember){
											accountConfig.username=usernnameInput.value;
											accountConfig.password=passwordInput.value;
											localStorage.setItem('accountConfig',JSON.stringify(accountConfig));
										}else{
											localStorage.setItem('accountConfig',JSON.stringify({remember:false}));
										}
									}
									
									mui.toast(data.messagetext);
									
									mui(but).button('reset');
								},
								error:function(xhr,type,errorThrown){
									//异常处理；
									mui.toast('服务器未响应');
									console.log(type);
									
									mui(but).button('reset');
								}
							});
					
					// return ;
					/* mui.openWindow({
								url: 'index.html',
								id: 'index',
								preload: true,
								show: {
									aniShow: 'zoom-fade-out'
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
							}); */
					// plus.webview.hide(plus.webview.currentWebview());
				});
			})
						
				
		</script>
		
	</body>

</html>